<script setup>
  import { ossImg } from "@/utils/utils";
  import { reactive } from "vue";

  const emdlz = getApp().emdlz2
  const emits = defineEmits(['close', 'offline', 'online'])
  const linkTo = url => uni.navigateTo({ url })
  const goBuyBtnImage = reactive({
    offline: ossImg('others/2025OreoSnacksXEggyParty/dialog/btn_offline_store.png'),
    online: ossImg('others/2025OreoSnacksXEggyParty/dialog/btn_online_store.png?v=1')
  })

  const toOfflineStore = () => {
    emdlz('track','event','guidepurchasepopup','click','check_Store_list', '');
    // emdlz('track','event','Oreo_eggy_purchase_page','click','go_near_store','');
    emits('offline')
  }

  const toOnlineStore = () => {
    emdlz('track','event','guidepurchasepopup','click','go_shop', '');
    // emdlz('track','event','Oreo_eggy_purchase_page','click','go_store','');
    emits('online')
  }

  const onClose = () => {
    emdlz('track','event','guidepurchasepopup','click','close_guide_purchase', '');
    // emdlz('track','event','Oreo_eggy_purchase_page','click','close_purchase_tips','');
    emits('close')
  }
</script>

<template>
  <view class="buy-modal">
    <view class="dialog-body">
      <image class="result-image" :src="ossImg('others/2025OreoSnacksXEggyParty/dialog/buy.png')"></image>
      <image
        class="close-icon"
        :src="ossImg('others/2025OreoSnacksXEggyParty/dialog/close.png')"
        @click.stop="onClose"
      />
      <image
        class="go-buy__btn mb-12px"
        :src="goBuyBtnImage['online']"
        @click.stop="toOnlineStore"
      ></image>
      <image
        class="go-buy__btn"
        :src="goBuyBtnImage['offline']"
        @click.stop="toOfflineStore"
      ></image>
    </view>
  </view>
</template>

<style lang="less" scoped>
.buy-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: -1;
  }
  .dialog-body {
    width: 308px;
    height: 318px;
    position: relative;
    margin-top: -56px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 194px;
    box-sizing: border-box;
    .result-image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
    .close-icon {
      width: 36px;
      height: 36px;
      position: absolute;
      top: 38px;
      right: 3px;
      z-index: 2;
    }
    .go-buy__btn {
      width: 187px;
      height: 33px;
      position: relative;
      z-index: 11;
    }
  }
}
</style>
